import { Button } from '@arco-design/web-react'
import { memo, useState } from 'react'
import type { FC, ReactNode } from 'react'
import Identify from './Identify'

interface IProps {
  children?: ReactNode
}

const MusicRecognition: FC<IProps> = () => {
  const [active, setActive] = useState(false)
  const [result, setResult] = useState(false)

  return (
    <div className={"w-full h-full relative flex justify-center items-center text-xl text-gray-500"}>
        <h1 className={"absolute top-4 left-4 text-lg text-center m-0"}>音乐识别</h1>
        <div className={"w-full h-full flex flex-col justify-center items-center"}>
            <Identify active={active}/>
            <p>智能识别电脑正在播放的歌曲、背景音乐...</p>
            <Button type="outline" style={{color: "#8b96d9"}} size="large" className={"mt-8"} onClick={() => setActive(!active)}>
              {active? "暂停识别" : "开启识别"}
            </Button>
            <span className={"text-sm text-gray-400 mt-4"}>识别结果将在这里显示</span>
        </div>
    </div>
  )
}

export default memo(MusicRecognition)

function HandleMusicHaveResult() {
  return (
    <div>music-recognition</div>
  )
}

function HandleMusicNoResult() {
  return (
    <div>not music-recognition</div>
  )
}


